<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>중고마트</title>
</head>
<body>
<section id="favorite" data-role="page">
    <header data-role="header" data-position="fixed">
    	<a href="index.do" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true">Home</a>
    	<a data-role="button" href="logout.do" class="ui-btn-right" data-ajax="false">로그아웃</a>
    	<h1 style="text-overflow:clip;margin-left:10%;margin-right:10%">관심상품 등록</h1>
    </header>
    <form id="favoriteForm" name="favoriteForm" data-ajax="false" method="post" action="registerFavorite.do">
    <div data-role="content">
    	<select name="category" id="category">
    		<option value="none">선택안함</option>
	        <option value="gloves">중고 야구 글러브</option>
	        <option value="instrument">중고 악기</option>
	        <option value="book">중고 책</option>
    	</select>
    	<p id="categoryCaution" class="caution"></p>
     	<input type="text" data-clear-btn="true" name="innerTitle" id="innerTitle" value="" placeholder="상품 키워드">
     	<p id="innerTitleCaution" class="caution"></p>
     	<input type="text" data-clear-btn="true" name="min_price" id="min_price" value="" placeholder="최소 가격">
     	<input type="text" data-clear-btn="true" name=max_price id="max_price" value="" placeholder="최대 가격">
     	<p id="priceCaution" class="caution"></p>
     	<input type="text" data-clear-btn="true" name="innerContact" id="innerContact" value="" placeholder="연락처(전화번호 또는 이메일)">
     	<p id="innerContactCaution" class="caution"></p>
     	<p id="message">${message}</p>
     	<input type="hidden" id="title" name="title">
     	<input type="hidden" id="contact" name="contact">
    </div>
    <div data-role="content">
        <input type="submit" formnovalidate id="submit" value="등록"  data-inline="false" data-icon="check" />
    </div>
	</form>

    <footer data-role="footer" data-position="fixed">
    	<div data-role="navbar" data-iconpos="left">
			<ul>
				<li><a id="products" href="products.do" data-icon="grid" rel="external">전체 상품</a></li>
				<li><a id="myProducts" href="myProducts.do" data-icon="bars" rel="external">내 상품</a></li>
				<li><a id="myFavorites" href="myFavorites.do" data-icon="star" rel="external">내 관심상품</a></li>
			</ul>
		</div><!-- /navbar -->
    </footer>
</section>
</body>
<style type="text/css">
.caution {
    color: red;
}
</style>
<script>
$(document).bind('pageinit', function() {
	invisibleCaution();
	
	var sectionId = $('section').attr('id');
	
	if ( sectionId == "favorite" ) {
		$('#myFavorites').addClass("ui-btn-active");
	} else if ( sectionId == "products" ) {
		$('#products').addClass("ui-btn-active");
	} else {
		$('#myProducts').addClass("ui-btn-active");
	}
	
	$('#favoriteForm').submit(function() {
		visibleMessage(false);
		if ( !validateForm() ) {
			return false;
		}
		
		return true;
	});
});

function invisibleCaution() {
	$('.caution').hide();
}

function visibleCategoryCaution(visible) {
	if ( !visible ) {
		$('#categoryCaution').hide();
	} else {
		$('#categoryCaution').show();
	}
}

function visibleInnerTitleCaution(visible) {
	if ( !visible ) {
		$('#innerTitleCaution').hide();
	} else {
		$('#innerTitleCaution').show();
	}
}

function visiblePriceCaution(visible) {
	if ( !visible ) {
		$('#priceCaution').hide();
	} else {
		$('#priceCaution').show();
	}
}

function visibleInnerContactCaution(visible) {
	if ( !visible ) {
		$('#innerContactCaution').hide();
	} else {
		$('#innerContactCaution').show();
	}
}

function visibleMessage(visible) {
	if ( !visible ) {
		$('#message').hide();
	} else {
		$('#message').show();
	}
}

function validatePrice() { 
	var priceMin = $.trim($('#min_price').val());
	var priceMax = $.trim($('#max_price').val());
	
	var result = { value: -1, message: "" }; 
	
	if ( priceMin == "" || priceMax == "" ) {
		result.message = "*금액을 정확히 입력해 주세요.";
		return result;
	}
	if ( !validateNumber(priceMin) ) {
		result.message = "*최소 금액을 정확히 입력해 주세요.";
		return result;
	}
	if ( !validateNumber(priceMax) ) {
		result.message = "*최대 금액을 정확히 입력해 주세요.";
		return result;
	}
	if ( (priceMax - priceMin) < 0 ) {
		result.message = "*최소 금액이 최대 금액보다 큽니다.";
		return result;
	}
	result.value = 0;
	return result;
}

function validateNumber(number) {
	var intRegex = /^\d+$/;
	return intRegex.test(number);
}

function validateForm() {
	var validation = true;
	invisibleCaution();

	if ( $('#category').val() == "none" ) {
		$('#categoryCaution').text("*카테고리를 선택해 주세요.");
		visibleCategoryCaution(true);
		validation = false;
	}
	if ( $.trim($('#innerTitle').val()) == "" ) {
		$('#innerTitleCaution').text("*상품 이름을 등록해 주세요.");
		visibleInnerTitleCaution(true);
		validation = false;
	}
	var result = validatePrice();
	if ( result.value == -1 ) {
		$('#priceCaution').text(result.message);
		visiblePriceCaution(true);
		validation = false;
	}
	if ( $.trim($('#innerContact').val()) == "" ) {
		$('#innerContactCaution').text("*연락처를 등록해 주세요.");
		visibleInnerContactCaution(true);
		validation = false;
	}
	if ( validation ) {
		var title = encodeURIComponent($.trim($('#innerTitle').val()));
		$('#title').val(title);
		
		var title = encodeURIComponent($.trim($('#innerContact').val()));
		$('#contact').val(title);
	}
	return validation;
}

</script>
</html>